<template>
  <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="mengli-commerce-order min-fill-page">
    <dataDisplay
      v-if="statisticsData"
      :data-list="[
        {data: statisticsData.orderNum, label: '订单数', icon: icon_6, isMoney: false },
        {data: statisticsData.saleNum / 100, label: '销售额', icon: icon_10 },
        {data: statisticsData.costNum / 100, label: '成本', icon: icon_11 },
        {data: (statisticsData.saleNum - statisticsData.costNum) / 100, label: '毛利', icon: rmb },
      ]"
      class="mobile-data"
      style="margin-bottom:16px;"
    />
    <div v-if="!showMobilePage" style="position:relative;margin-bottom:16px;">
      <FilterTool
        ref="FilterToolRef"
        v-model="paramsObj"
        :drawer-size="800"
        :filter-list="filterList"
        show-search-btn
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
        @filterTagStatus="filterTagStatus"
      />
      <div class="opeator-bar">
        <createBtn
          v-if="hasRouteAuth('mengli:commerceOrder:create') || isAdmin"
          style="margin-right:14px;"
          @click.native="toCreate" />
        <MoreOpeator
          ref="moreOpeatorRef"
          :list="[
            {label:'导出', type: 'export', auth: hasRouteAuth('mengli:commerceOrder:export'), exportApi:'/admin/mengli/commerce/export', exportName:'电商销售',
             isBeforeExport:true, beforeExport: exportBeforeExport, refName:'projectExportRef'},
            {label:'订单导入', type: 'import', auth:hasRouteAuth('mengli:commerceOrder:import'), importApi:'/admin/mengli/commerce/import', callback:fetchData},
            {label:'物流导入', type: 'import', auth:hasRouteAuth('mengli:commerceOrder:import'), importApi:'/admin/mengli/commerce/logistics/import', callback:fetchData},
            {label:'物流导入模板下载', type: 'export', exportApi:'/admin/mengli/commerce/logistics/export', exportName:'物流信息模板'}
          ]"
          label="更多操作"
          style="margin-right:14px;"
        />
      </div>
    </div>
    <div v-loading="listLoading" class="table-list" style="min-height: 300px;">
      <u-table
        v-if="list.items.length"
        ref="commerceOrderRef"
        :data="list.items"
        :height="setTableHeight"
        :row-height="rowHeight()"
        :border="true"
        :row-class-name="tableRowClassName"
        beautify-table
        header-drag-style
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row
        @sort-change="sortMethod"
        @select="selectTable"
        @select-all="selectTable">
        <u-table-column
          align="center"
          type="selection"
          fixed
          width="50"/>
        <u-table-column align="left" label="订单编号" min-width="230">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.orderNum" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ scope.row.orderNum }}</div>
              <router-link
                :to="{name: 'mengliOrderDetail', params: { id: scope.row.id }, query: { type: 2 }}"
                class="order-num"
              ><div class="ellipsis">{{ scope.row.orderNum }}</div></router-link>
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="订单编号（第三方）" min-width="190">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.orderNumThirdParty" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="订单状态" width="110">
          <template slot-scope="scope">
            <div>{{ scope.row.orderStatus | commerceOrderStatus }}</div>
          </template>
        </u-table-column>
        <!-- <u-table-column align="left" label="出库状态" width="90">
            <template slot-scope="scope">
              <div>{{ scope.row.deliveryStatus | orderDeliveryStatus }}</div>
            </template>
          </u-table-column> -->
        <u-table-column align="left" label="标题" min-width="220">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.title" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="IP形象" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.ipName" />
          </template>
        </u-table-column>
        <u-table-column align="right" label="价格(元)" width="120" sortable="custom" prop="price">
          <template slot-scope="scope">
            <PriceColumn :real-val="scope.row.price" :price="scope.row.price / 100" />
          </template>
        </u-table-column>
        <u-table-column align="right" label="含快递(元)" width="120">
          <template slot-scope="scope">
            <PriceColumn :real-val="scope.row.express" :price="scope.row.express / 100" />
          </template>
        </u-table-column>
        <u-table-column align="right" label="成本(元)" width="120" sortable="custom" prop="cost">
          <template slot-scope="scope">
            <PriceColumn :real-val="scope.row.cost" :price="scope.row.cost / 100" />
          </template>
        </u-table-column>
        <!-- <u-table-column align="left" label="供应商分成" width="120">
            <template slot-scope="scope">
              <div v-if="scope.row.supplierCost || scope.row.supplierCost === 0">{{ (scope.row.supplierCost / 100) | moneyFilter }}</div>
              <div v-else>--</div>
            </template>
          </u-table-column> -->
        <u-table-column align="left" label="商品属性" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.goodsAttribute" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="客户名称" min-width="220">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.clientName" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="销售" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.market" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="SKU编码" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.goodsCoding" />
          </template>
        </u-table-column>
        <!-- <u-table-column align="left" label="发货时间" min-width="110">
          <template slot-scope="scope">
            <div v-if="scope.row.logisticsInfo && scope.row.logisticsInfo.invoiceTime">{{ scope.row.logisticsInfo.invoiceTime| standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
            <span v-else>--</span>
          </template>
        </u-table-column> -->
        <u-table-column align="left" label="发货时间(实际)" min-width="160" sortable="custom" prop="actualTime">
          <template slot="header" slot-scope="scope">
            <div class="table-header">
              <div class="flex">
                <span class="label">{{ scope.column.label }}</span>
                <InfoIcon content="记录订单状态变更为卖家已发货或交易完成的时间，结算单统计以该时间为准。"/>
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <ToolTip :content="scope.row.actualTime | standardFormat('YYYY/MM/DD HH:mm:ss')" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="发货时间(系统)" min-width="160" sortable="custom" prop="systemTime">
          <template slot="header" slot-scope="scope">
            <div class="table-header">
              <div class="flex">
                <span class="label">{{ scope.column.label }}</span>
                <InfoIcon content="共创平台扣减库存的时间，该时间用于判断是否出库，拥有该时间才允许进行结算单统计。"/>
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <ToolTip :content="scope.row.systemTime | standardFormat('YYYY/MM/DD HH:mm:ss')" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="发货时间(淘宝)" min-width="150">
          <template slot="header" slot-scope="scope">
            <div class="table-header">
              <div class="flex">
                <span class="label">{{ scope.column.label }}</span>
                <InfoIcon content="数据来源于淘宝平台，仅用于参考。"/>
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <ToolTip :content="scope.row.taobaoTime" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="仓库" width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.warehouse" />
          </template>
        </u-table-column>
        <u-table-column align="right" label="物流成本" width="130">
          <template slot-scope="scope">
            <PriceColumn v-if="scope.row.logisticsInfo && scope.row.logisticsInfo.cost" :real-val="scope.row.logisticsInfo.cost" :price="scope.row.logisticsInfo.cost / 100" />
            <span v-else>--</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="发货单号" width="130">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.logisticsInfo ? scope.row.logisticsInfo.invoiceNum : ''" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="关联退货单" width="120">
          <template slot-scope="scope">
            <div :class="{'light-word': scope.row.returnSaleId}" @click="toAfterSale(scope.row)">{{ scope.row.returnSaleId ? '有' : '无' }}</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="订单渠道" width="90">
          <template slot-scope="scope">
            <div>{{ scope.row.orderChannel | commerceOrderType }}</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="来源平台" width="90">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.platform" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="核销状态" width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.accountState | setAccountState }}</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="付款时间" min-width="170" sortable="custom" prop="payTime">
          <template slot-scope="scope">
            <div v-if="scope.row.payTime">{{ scope.row.payTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
            <span v-else>--</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="订单创建时间" min-width="170" sortable="custom" prop="orderCreateTime">
          <template slot-scope="scope">
            <div v-if="scope.row.orderCreateTime">{{ scope.row.orderCreateTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
            <span v-else>--</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="更新时间" min-width="170" sortable="custom" prop="updateTime">
          <template slot-scope="scope">
            <div v-if="scope.row.updateTime">{{ scope.row.updateTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
            <span v-else>--</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="创建时间" min-width="170" sortable="custom" prop="createTime">
          <template slot-scope="scope">
            <div v-if="scope.row.createTime">{{ scope.row.createTime | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
            <span v-else>--</span>
          </template>
        </u-table-column>
        <u-table-column align="left" label="创建人" width="90">
          <template slot-scope="scope">
            <div>{{ scope.row.creator || '--' }}</div>
          </template>
        </u-table-column>
        <u-table-column align="left" width="110" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row)"><span style="font-size:14px;">查看</span></el-button>
            <el-button
              v-if="(hasRouteAuth('mengli:commerceOrder:edit') || isAdmin) && scope.row.orderChannel === 0"
              :disabled="beforeLastMonth(scope.row.orderCreateTime)"
              class="border-left"
              type="text"
              @click="toEdit(scope.row)">
              <span style="font-size:14px;">编辑</span>
            </el-button>
            <el-dropdown v-if="(hasRouteAuth('mengli:commerceOrder:edit') && scope.row.orderChannel) || (hasRouteAuth('mengli:commerceOrder:delete') && scope.row.orderChannel && scope.row.orderStatus < 2)" trigger="click">
              <div class="el-dropdown-link">
                <el-button type="text"><span style="font-size:14px;">更多<i class="el-icon-arrow-down"/></span></el-button>
              </div>
              <el-dropdown-menu slot="dropdown" style="margin-top:-24px;margin-right:15px;padding: 0;">
                <el-dropdown-item
                  v-if="(hasRouteAuth('mengli:commerceOrder:edit') || isAdmin) && scope.row.orderChannel"
                  :disabled="beforeLastMonth(scope.row.orderCreateTime)"
                  style="width:100px;text-align: center"
                  @click.native="toEdit(scope.row)">
                  <div>编辑</div>
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="(hasRouteAuth('mengli:commerceOrder:delete') || isAdmin) && scope.row.orderChannel && scope.row.orderStatus < 2"
                  :disabled="beforeLastMonth(scope.row.orderCreateTime)"
                  style="width:100px;text-align: center"
                  @click.native="toDel(scope.row)">
                  <div>删除</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </u-table-column>
      </u-table>
      <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
    </div>
    <el-row v-if="showMobilePage && list && list.total > 0" type="flex" justify="left">
      <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
      <el-pagination
        v-show="list.total > 0"
        :current-page="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="pageLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
    <fixed-pagination v-show="list.total > 0 && !showMobilePage || showMobilePage">
      <template v-if="showMobilePage">
        <FilterTool
          ref="FilterToolRef"
          v-model="paramsObj"
          :drawer-size="800"
          :filter-list="filterList"
          show-search-btn
          show-mobile-icon
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus"
        />
        <MoreOpeator
          ref="moreOpeatorRef"
          :list="[
            {label:'导出', type: 'export', auth: hasRouteAuth('mengli:commerceOrder:export'), exportApi:'/admin/mengli/commerce/export', exportName:'电商销售',
             isBeforeExport:true, beforeExport: exportBeforeExport, refName:'projectExportRef'},
            {label:'订单导入', type: 'import', auth:hasRouteAuth('mengli:commerceOrder:import'), importApi:'/admin/mengli/commerce/import', callback:fetchData},
            {label:'物流导入', type: 'import', auth:hasRouteAuth('mengli:commerceOrder:import'), importApi:'/admin/mengli/commerce/logistics/import', callback:fetchData},
            {label:'物流导入模板下载', type: 'export', exportApi:'/admin/mengli/commerce/logistics/export', exportName:'物流信息模板'}
          ]"
          show-mobile-icon
        />
        <createBtn
          v-if="hasRouteAuth('mengli:commerceOrder:create') || isAdmin"
          mobile-table
          @click.native="toCreate" />
      </template>
      <template v-else>
        <SelectionNum :select-item="multipleSelectionAll" style="flex: 1;" @clearMixinSelection="clearMixinSelection" />
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </template>
    </fixed-pagination>
  </div>
</template>
<script>
import setting from '@/assets/setting.png';
import icon_6 from '@/assets/dataDisplay/icon_6.png';
import icon_10 from '@/assets/dataDisplay/icon_10.png';
import icon_11 from '@/assets/dataDisplay/icon_11.png';
import rmb from '@/assets/dataDisplay/rmb.png';
import FilterTool from '@/components/Tool/filter';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createBtn from '@/components/Common/baseComponent/createBtn';
import ImportButton from '@/components/ImportButton';
import ExportButton from '@/components/ExportButton';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import { getmengliCommerce, mengliOrderDel, getCommerceOrderStatistics, getInventoryRepo } from '@/api/mengli';
import { setAccountState, commerceOrderType, commerceOrderStatus } from '@/filters/status';
import { moneyFilter } from '@/filters/number';
import { standardFormat } from '@/filters/date';
import { verificationOptions } from '@/views/project/model/selectData';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import { paramsRangeFormat, paramsAryToStr } from '@/utils/paramsFormat';
import TableAdaptive from '@/mixins/tableAdaptive';
import tableSelections from '@/mixins/tableSelections';
import mobileTable from '@/mixins/mobileTable';
import { showModal } from '@/utils/message';

export default {
  components: { dataDisplay, FilterTool, EmptyPlaceholder, createBtn, ImportButton, ExportButton, MoreOpeator },
  filters: {
    moneyFilter, standardFormat,
    setAccountState, commerceOrderType,
    commerceOrderStatus,
    orderDeliveryStatus(type) {
      const obj = {
        '0': '待出库',
        '1': '已出库',
        '-1': '库存不足'
      };
      return obj[String(type)] || '--';
    }
  },
  mixins: [TableAdaptive, tableSelections, mobileTable],
  data() {
    return {
      icon_6,
      icon_10,
      icon_11,
      rmb,
      tableRefName: 'commerceOrderRef', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      verificationOptions,
      setting,
      paramsObj: {},
      statisticsData: {},
      orderTypeOption: [
        { value: '', label: '全部' },
        { value: 0, label: '线上' },
        { value: 1, label: '线下' }
      ],
      orderStatusOption: [
        { value: '', label: '全部' },
        { value: 5, label: '正常销售订单' },
        { value: 0, label: '等待买家付款' },
        { value: 1, label: '买家已付款' },
        { value: 2, label: '卖家已发货' },
        { value: 3, label: '交易成功' },
        { value: 4, label: '交易关闭' },
        { value: 6, label: '退款中的订单' }
      ],
      orderDeliveryStatus: [
        { value: '', label: '全部' },
        { value: 0, label: '待出库' },
        { value: 1, label: '已出库' },
        { value: -1, label: '库存不足' }
      ],
      stockOptions: [
        { value: 1, label: '是' },
        { value: 0, label: '否' }
      ],
      page: 1,
      perPage: 20,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true
      },
      listLoading: false,
      screenWidth: null,
      rangeKeyArr: [{
        attr: 'payTime',
        start: 'payStartTime',
        end: 'payEndTime',
        type: 'time'
      }, {
        attr: 'createTime',
        start: 'createStartTime',
        end: 'createEndTime',
        type: 'time'
      }, {
        attr: 'orderCreateTime',
        start: 'orderCreateStartTime',
        end: 'orderCreateEndTime',
        type: 'time'
      }, {
        attr: 'systemTime',
        start: 'systemStartTime',
        end: 'systemEndTime',
        type: 'time'
      }, {
        attr: 'actualTime',
        start: 'actualTimeStart',
        end: 'actualTimeEnd',
        type: 'time'
      }, {
        attr: 'price',
        start: 'priceStart',
        end: 'priceEnd',
        type: 'money'
      }],
      arrayKeyArr: ['orderStatus'],
      sortType: '',
      sortName: '',
      isUmyTable: true,
      repositoryOptions: [],
      ids: ''
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    },
    filterList() {
      // const leftLabelWidth = '80px';
      // const rightLabelWidth = '120px';
      let arr = [
        // 输入框
        { keyword: 'orderNum', name: '订单编号', type: 'input' },
        { keyword: 'goodsCoding', name: 'SKU编码', type: 'input' },
        { keyword: 'orderNumThirdParty', name: '订单编号(第三方)', type: 'input' },
        { keyword: 'goodsAttribute', name: '商品属性', type: 'input' },
        { keyword: 'title', name: '标题', type: 'input' },
        { keyword: 'ipFigure', name: 'IP形象', type: 'input' },
        { keyword: 'ipSeries', name: 'IP系列', type: 'input' },
        { keyword: 'creator', name: '创建人', type: 'input' },
        { keyword: 'price', name: '价格', type: 'inputRange' },
        // 日期
        { keyword: 'payTime', name: '付款时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss',
          startPlaceholder: '开始时间', endPlaceholder: '结束时间' },
        { keyword: 'orderCreateTime', name: '订单创建时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss',
          startPlaceholder: '开始时间', endPlaceholder: '结束时间' },
        { keyword: 'createTime', name: '创建时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss',
          startPlaceholder: '开始时间', endPlaceholder: '结束时间' },
        { keyword: 'systemTime', name: '发货时间(系统)', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss',
          startPlaceholder: '开始时间', endPlaceholder: '结束时间' },
        { keyword: 'actualTime', name: '发货时间(实际)', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm:ss',
          startPlaceholder: '开始时间', endPlaceholder: '结束时间' }
      ];
      const select = [
        // 下拉
        { keyword: 'orderStatus', name: '订单状态', type: 'mulSelect', options: this.orderStatusOption },
        { keyword: 'orderChannel', name: '订单渠道', type: 'select', options: this.orderTypeOption },
        { keyword: 'accountState', name: '核销状态', type: 'select', options: this.verificationOptions },
        { keyword: 'stockStatus', name: '是否出库', type: 'select', options: this.stockOptions },
        { keyword: 'warehouseId', name: '仓库', type: 'select', options: this.repositoryOptions }
      ];
      arr.forEach(i => {
        i.labelWidth = '120px';
      });
      arr = arr.concat(select);
      return arr;
      // width: this.screenWidth < 1920 ? '100%' : ''
    },
    tableOutsideHeight() {
      return 246;
    }
  },
  created() {
    this.formatQuery();
    this.queryInventoryRepo();
    this.fetchData(true);
    this.screenWidth = screen.width;
  },
  beforeDestroy() {
    this.$route.query.stop = false;
  },
  methods: {
    hasRouteAuth,
    beforeLastMonth(date) {
      if (!date) return;
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      // 截止操作日期至上个月
      const deadline = new Date(year, month - 1, 1, 0, 0, 0).getTime();
      return date * 1000 < deadline;
    },
    getCommerceOrderStatistics(params) {
      getCommerceOrderStatistics(params).then(res => {
        if (res.code) {
          this.statisticsData = res.data;
        }
      });
    },
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      // 时间处理
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      params.sortType = this.sortType;
      params.sortName = this.sortName;
      this.getCommerceOrderStatistics(params);
      params.page = this.page;
      params.perPage = this.perPage;
      this.listLoading = true;
      getmengliCommerce(params).then(({ data }) => {
        data.items.map(item => {
          item.ipName = item.ipAry.map(val => {
            return `${val.ipFigure}/${val.ipSeries || '--'}`;
          }).join(',');
          return item;
        });
        this.list = data;
        this.list.isInit = false;
        this.listLoading = false;
        this.page = data.page;
        this.perPage = data.perPage;
        if (this.setSelectRow) this.setSelectRow(data.items);
      }).catch(e => {
        console.error(e);
        this.listLoading = false;
      });
    },
    queryInventoryRepo() {
      getInventoryRepo({ page: 1, perPage: 999 }).then(res => {
        const result = res.data && res.data.items || [];
        result.forEach(item => {
          item.value = item.repositoryId;
          item.label = item.repositoryName;
        });
        this.repositoryOptions = result;
      }).catch(err => {
        console.log(err);
      });
    },
    formatQuery() {
      if (this.$route.query.stop) {
        if (this.$route.query.empty) return;
        this.$set(this.paramsObj, 'stockStatus', 1);
        const { orderChannel, rangeDate, code, rId } = this.$route.query;
        orderChannel && this.$set(this.paramsObj, 'orderChannel', +orderChannel);
        code && this.$set(this.paramsObj, 'goodsCoding', code);
        rId && this.$set(this.paramsObj, 'warehouseId', +rId);
        if (rangeDate) {
          const date = JSON.parse(rangeDate);
          this.$set(this.paramsObj, 'systemTime', [date.st, date.et]);
        }
      }
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    sortMethod(a) {
      if (a.order) {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      } else {
        this.sortName = '';
        this.sortType = '';
      }
      this.queryClick();
    },
    exportBeforeExport() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      // 时间处理
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      params.page = this.page;
      params.perPage = this.perPage;
      params.ids = this.ids;
      if (this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'projectExportRef');
      }
    },
    tableSelectionChange(e) {
      this.ids = e.map(item => {
        return item.id;
      }).join(',');
    },
    toCreate() {
      this.$router.push({
        name: 'mengliOrderAdd',
        query: { type: 2 }
      });
    },
    toDetail(row) {
      this.$router.push({
        name: 'mengliOrderDetail',
        params: { id: row.id },
        query: { type: 2 }
      });
    },
    toEdit(row) {
      this.$router.push({
        name: 'mengliOrderEdit',
        params: { id: row.id },
        query: { type: row.orderChannel ? 2 : '21' }// 21代表线上订单
      });
    },
    toDel(row) {
      showModal('是否确定删除该订单', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        mengliOrderDel(row.id).then(res => {
          this.$message.success('删除成功');
          this.resetItemSelected(row.id);
          this.fetchData();
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => {
        return false;
      });
    },
    toAfterSale(row) {
      if (!row.returnSaleId) {
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'mengliOrder',
        query: {
          categoryId: 3,
          orderNum: row.orderNum
        }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.opeator-bar {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.border-left {
  position: relative;
  margin-left:6px;
  &::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.mengli-commerce-order {
  margin: 16px 16px 0 16px;
  background-color: #fff;
  padding: 20px 20px 55px 20px;
  .system-btn {
    display: flex;
    align-items: center;
    width: 180px;
    justify-content: flex-end;
    .btn-right-item {
      margin-right: 8px;
    }

  }
  .order-num {
    color: #406EFF;
  }
  .table-header {
    display: inline-block;
    .flex {
      display: flex;
      align-items: center;
    }
  }
}
.el-dropdown-link {
  display: block;
  position: relative;
  padding-left:6px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.light-word {
  color: #406EFF;
  cursor: pointer;
}
.table-list {
  .flex {
    align-items: center;
  }
  ::v-deep .info-icon-img {
    height: 16px;
  }
}
</style>
